<template>
  <main>
    <aside>
      <div class="indb">
        <h3>人脸入库</h3>
        <input type="hidden" v-model="img.url">
        <div class="form-group">
          <!-- <label for="img">图像: </label> -->
          <input type="file" id="img" accept="image/png, image/jpeg, image/jpg" multiple>
        </div>
        <div>
          <button class="btn btn-default" v-on:click="saveRow">入库</button>
        </div>
      </div>

      <div class="com1v1">
        <h3>1v1比对</h3>
        <div class="form-group">
          <input type="file" id="img1">
        </div>
        <div class="form-group">
          <input type="file" id="img2" accept="image/png, image/jpeg, image/jpg">
        </div>
        <div class="form-group">
          <label for="sim" v-if="compare_1v1_score">相似度: </label>
          <p>{{ compare_1v1_score }}</p>
        </div>
        <div>
          <button class="btn btn-default" v-on:click="compare_1v1">1v1比对</button>
        </div>
      </div>

      <div class="com1vn">
        <h3>1vN检索</h3>
        <div class="form-group">
          <input type="file" id="img3" accept="image/png, image/jpeg, image/jpg">
        </div>
        <div class="form-group">
          <label for="compare_1vN_sim" v-if="compare_1vN_img['score']">相似度: </label>
          <p>{{ compare_1vN_img['score'] }}</p>
          <label for="compare_1vN_name" v-if="compare_1vN_img['user']">相似用户: </label>
          <p>{{ compare_1vN_img['user'] }}</p>
        </div>
        <div>
          <button class="btn btn-default" v-on:click="compare_1vN">1vN检索</button>
        </div>
      </div>

    </aside>

    <article>
      <div class="facedb">
        <h3>人脸底库</h3>
        <ul>
          <li v-for="(item, idx) in img_list">
            <img :src="item.img" alt="">
            <!-- <div class="user">{{ item.user }}</div> -->
            <!-- <button @click="deleteRow(item)" :data-idx="idx" class="btn btn-danger">
                  <i class="glyphicon glyphicon-remove"></i>
            </button> -->
          </li>
        </ul>
      </div>

    </article>



  </main>

</template>

<script>
import axios from 'axios'
import { onMounted, reactive, toRefs } from 'vue'


export default {

  setup() {
    let base_url = "http://10.82.14.162:8000/face/"
    const img_blank = { url: '', user: '', img: '', feature: '', }
    const compare_1vN_img_blank = { score: '', user: '', img: '' }
    const state = reactive({
      img_list: [],
      img: Object.assign({}, img_blank),
      compare_1vN_img: Object.assign({}, compare_1vN_img_blank),
      compare_1v1_score: undefined,
    })

    const getImgList = () => {
      axios.get(base_url).then(res => {
        state.img_list = res.data;
        state.img = Object.assign({}, img_blank)
      }).catch(err => {
        console.log(err);
      })
    }

    const saveRow = () => {
      let data = new FormData();
      data.append("method", "post_db")
      let files = document.getElementById('img').files
      Array.from(files).forEach(item => {
        console.log('item: ', item)
        data.append('img', item)
      })
      console.log("axios: ", data)

      const headers = Object.assign(({}), {})
      headers['Content-Type'] = `multipart/form-data; boundary=${data._boundary}`

      axios.post(base_url, data, { headers: headers }).then(resp => {
        console.log("success: ", resp)
        getImgList();
      }).catch(error => {
        alert(error['response']['data']['message'])
        console.log(error)
      })
    }

    const compare_1vN = () => {
      var data = new FormData();
      data.append("method", "compare_1vN")
      let files = document.getElementById('img3').files
      Array.from(files).forEach(item => {
        console.log('item: ', item)
        data.append('img', item)
      })
      console.log("axios: ", data)

      const headers = Object.assign(({}), {})
      headers['Content-Type'] = `multipart/form-data; boundary=${data._boundary}`

      axios.post(base_url, data, { headers: headers }).then(resp => {
        console.log("success: ", resp)
        state.compare_1vN_img['score'] = resp.data.score
        state.compare_1vN_img['user'] = resp.data.user
        state.compare_1vN_img['img'] = resp.data.img
      }).catch(error => {
        console.log(error)
      })
    }

    const compare_1v1 = () => {
      var data = new FormData();
      let files1 = document.getElementById('img1').files
      Array.from(files1).forEach(item => {
        console.log('item: ', item)
        data.append('img1', item)
      })
      let files2 = document.getElementById('img2').files
      Array.from(files2).forEach(item => {
        console.log('item: ', item)
        data.append('img2', item)
      })
      data.append("method", "compare_1v1")

      const headers = Object.assign(({}), {})
      headers['Content-Type'] = `multipart/form-data; boundary=${data._boundary}`

      axios.post(base_url, data, { headers: headers }).then(resp => {
        state.compare_1v1_score = resp.data.score
        console.log("success: ", resp)
      }).catch(error => {
        console.log(error)
      })
    }

    const deleteRow = (item) => {
      axios.delete(item.url).then(() => {
        getImgList();
      }).catch(err => {
        console.log(err);
      })
    }

    onMounted(() => {
      getImgList();
    })
    return {
      ...toRefs(state),
      saveRow,
      compare_1vN,
      compare_1v1,
      deleteRow
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- <style>
@import '../less/FaceDB.css'
</style> -->
